<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

onMounted(() => {
  nextTick(() => {
    init()
  })
})

const init = () => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['纺织服装、服饰产业', '化学原料和化工制品加工产业', '通用设备制造产业', '专用设备制造业', '电气机械和器材制造业', '计算机通信和其他电子产业','仪器仪表制造业'],
        axisLabel:{
          color: 'rgba(0, 0, 0, 0.65)',
          rotate: 45,//倾斜度 -90 至 90 默认为0
          margin: 10,
          formatter: function (params) {
            return params.slice(0, 3) + '...';
          },
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true
        }
      },
      grid: {
        top: '10',
        left: '30',
        right: '30',
        bottom: '0',
        containLabel: true
      },
      series: [
        {
          data: ['1.48', '0.72', '1.64', '39.12', '75.94','2.55','14.34'],
          type: 'bar',
          barWidth: 25,
          showBackground:false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              color: '#73deb3',
            },
          },
        },
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
}


</script>

<style lang="less" scoped>
</style>
